<template>
	<view>
		<qi-navbar v-slot:navcenter>首页</qi-navbar>
		<qi-tabControl :titles="['默认', '推荐', '最新']" @tabClick="changeSort" />
		<scroll-view ref="refScrolltop" scroll-y class="scrollheight" :scroll-top="windsessionStorageScroll.num"
			@scrolltolower="tolower" @scroll="refscroll">
			<swiper indicator-dots autoplay class="swiper">
				<swiper-item v-for="(item, i) in slides" :key="i">
					<image :src="item.img_url" class="swiperimg"></image>
				</swiper-item>
			</swiper>
			<goodscard :goods="showGoods" />
			<view class="iconfont icon-qudingbu  back-top" v-show="isShow" @tap="TapclickNavback"></view>
		</scroll-view>

	</view>
</template>


<script>
	import {
		postMenu
	} from '@/https/API.js';
	
	import {mapState,mapActions,mapMutations} from "vuex"
	export default {
		data() {
			return {
				slides: [], //轮播图
				booklist: [], //书
				currentType: 'sales', //
				isShow: false, //顶部
				tabIndex: 0,
				scrollTop: 0, 
				windsessionStorageScroll: { num: '', type: '' },
				goods: {
					sales: {
						page: 0,
						data: []
					},
					recommend: {
						page: 0,
						data: []
					},
					new: {
						page: 0,
						data: []
					}
				},
			}
		},
		onLoad() {
			this.getbookgoods('sales')

		},
		computed: {
			...mapState('m_home',['vuexhomenavtop']),
			showGoods() {
				return this.goods[this.currentType].data;
			},
		},
		methods: {
			...mapMutations('m_home', ['homeincrement', 'clear']),
			...mapActions('m_home', ['addDataListCart']),
			tolower() {
				this.getbookgoods(this.currentType)
			},
			// 滚动
			refscroll(e) {
				this.scrollTop = e.detail.scrollTop;
				e.detail.scrollTop > 600 ?
					(this.isShow = true) :
					(this.isShow = false);
			},
			getbookgoods(type) {
				const params = {};
				params.page = this.goods[type].page + 1;
				if ('sales' == type) {
					params.sales = 1;
				} else if ('recommend' == type) {
					params.recommend = 1;
				} else if ('new' == type) {
					params.new = 1;
				}
				postMenu({
					data: params
				}).then(res => {
					this.slides = res.data.slides
					// 保存图书商品数据(合并新数据与上次数据包)
					this.goods[type].data.push(...res.data.goods.data);
					this.goods[type].page += 1;
				})
			},

		// 切换tab排序
		changeSort(index) {
			if (this.tabIndex === index) return;
			let scoltop = {
				type: this.currentType,
				num: this.scrollTop.toFixed(2)
			};
			this.addDataListCart(scoltop);
			this.tabIndex = index;
			this.onSwitchTab(index);
		},
			// 导航栏
			onSwitchTab(index) {
				switch (index) {
					case 0:
						this.currentType = 'sales';
						break;
					case 1:
						this.currentType = 'recommend';
						break;
					case 2:
						this.currentType = 'new';
						break;
				}
				this.getbookgoods(this.currentType)
				let scoltop = this.vuexhomenavtop.find(
					x => x.type == this.currentType
				) || { num: 0, type: '' };
				console.log(scoltop);
				this.$nextTick(() => {
					this.windsessionStorageScroll = scoltop;
				});
			},
			// 回到顶部
			TapclickNavback() {
				this.windsessionStorageScroll.num == 0 ? this.windsessionStorageScroll.num = 1 : this.windsessionStorageScroll.num = 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	swiper {
		height: 220rpx;

		.swiperimg {
			height: 100%;
		}
	}
	.scrollheight {
		height: calc(100vh - 200rpx - var(--window-bottom));
	}
	.back-top {
		height: 80rpx;
		width: 80rpx;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.4);
		position: fixed;
		bottom: 200rpx;
		right: 40rpx;
		text-align: center;
		line-height: 80rpx;
		z-index: 99;
		font-size: 34rpx;
	}
</style>